<template>
  <div class="bigbox">
    <div class="gps">
      <div class="gpsA">
        <RouterLink
          class="gpsB"
          :to="{ path: `/parent/${id}/child/${routeName}` }"
          >子路由</RouterLink
        >
      </div>
      <div class="gpsA">
        <RouterLink
          class="gpsB"
          :to="{ path: `/parent/${id}/child1/${routeName}` }"
          >子路由1</RouterLink
        >
      </div>
      <div class="gpsA">
        <RouterLink
          class="gpsB"
          :to="{ path: `/parent/${id}/child2/${routeName}` }"
          >子路由2</RouterLink
        >
      </div>
      <div class="gpsA">
        id:<input
          style="width: 60px; margin-left: 8px"
          type="text"
          v-model="id"
        />
      </div>
      <div class="gpsA">
        name:<input
          style="width: 56px; margin-left: 8px"
          type="text"
          v-model="routeName"
        />
      </div>
    </div>
    <div class="content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { useRoute } from "vue-router";
  const route = useRoute();
  const id = ref(route.params.id);
  const routeName = ref(route.params.name || "abc");
</script>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  .bigbox {
    width: 100vw;
    height: 100vh;
    background-color: #edf0ed;
    display: flex;
    flex-wrap: wrap;
  }

  .gps {
    width: 200px;
    min-height: calc(100vh - 105px);
    background-color: #334258;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .gpsA {
    width: 160px;
    height: 60px;
    background-color: #009688;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 30px;
    margin-top: 30px;
  }

  .gpsB {
    padding-left: 14px;
    color: white;
  }

  .content {
    width: calc(100vw - 210px);
    height: 100vh;
    background-color: #f1f2f6;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
